$active-color: #2c64df;
$nav-color: #5d5d5d;
$min-size: 0.1777777778rem;
$input-size: 0.18rem;
$page-size: 0.18rem;
$small-size: 0.2222222222rem;
$title-size: 0.26rem;
$title-size2: 0.24rem;
$tabs-size: 0.24rem;
$tabs-size2: 0.19rem;
$line-size: 0.0111111111rem;
$radius: 0.0666666667rem;
$radius2: 0.12rem;
$pad-top: 0.1rem;
$pad-default: 0.1rem;
$pad-insert: 0.3rem;
$mar-right: 0.23rem;


.custom-tabs-ui {
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-top:last-child {
      padding: 0.05rem 0.2rem;
  }
  .el-tabs__item {
    font-size: $tabs-size2;
    color: #979696;
    position: relative;
    padding: 0.05rem 0.2rem;
    height: 0.65rem;
  }
  .el-tabs__item.is-active {
    font-size: $tabs-size;
    font-weight: bold;
    color: #333;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      height: 0.06rem;
      left: 30%;
      right: 30%;
      bottom: 0rem;
      background-color: $active-color;
      border-radius: 0.2rem;
    }
  }
  .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 20%;
    height: 0.06rem;
    // background-color: $active-color;
    background-color: transparent;
    border-radius: 0.2rem;
  }
  .el-tabs__header {
    margin-bottom: 0.15rem;
  }
 }
.custom-table-ui {
  .el-table {
    &::before {
      background-color: transparent;
    }
    th.el-table__cell.is-leaf {
      border-color: transparent;
    }
    .el-table__cell {
      padding: 0.092rem 0;
    }
    thead {
      color: #333;
    }
    tr {
      background-color: transparent;
    }
    th.el-table__cell {
      background-color: transparent;
    }
    th.el-table__cell>.cell, .el-table .cell {
      padding-left: 0.15rem;
      padding-right: 0.15rem;
      font-size: 0.2rem;
      white-space: nowrap;
    }
    .cell {
      font-size: 0.19rem;
      overflow: visible;
    }
    .caret-wrapper {
      height: 0.53rem;
      width: 0.3rem;
    }
    .sort-caret.descending {
      bottom: 0.1rem;
    }
    td.el-table__cell {
      border-color: transparent;
    }
  }
}
.custom-input {
  .el-input--mini .el-input__inner {
    height: 0.38rem;
    line-height: 0.38rem;
  }

  .el-input--mini {
    font-size: $input-size;
  }
  .el-select .el-input .el-select__caret {
    font-size: 0.2rem;
  }
  .el-input--mini .el-input__icon {
    line-height: 0.38rem;
  }
}
.custom-select {
  .el-input--mini .el-input__icon {
    line-height: 0.38rem;
  }
  .el-select-dropdown__item {
    font-size: $input-size;
    padding: 0 0.3rem;
    height: 0.38rem;
    line-height: 0.38rem;
  }
}
.custom-page {
  .el-pagination span:not([class*=suffix]) {
    height: 0.38rem;
    line-height: 0.38rem;
    font-size: $page-size;
  }
  .el-pagination .el-select .el-input .el-input__inner {

  }
  .el-pagination .el-select .el-input {
    width: 1.5rem;
  }
  .el-pagination__sizes .el-input .el-input__inner, .el-pagination .el-input__inner {
    font-size: $page-size;
  }
  .el-pagination--small .el-pager li, .el-pagination--small .el-pager li:last-child {
    border-color: transparent;
    font-size: $page-size;
    line-height: 0.38rem;
    height: 0.38rem;
    min-width:  0.38rem;
  }
  .el-pagination__jump {
    margin-left: 0.2rem;
  }
  .el-input__inner {
    border: $line-size solid #DCDFE6;
  }
  .el-pagination__editor.el-input {
    width: 0.8rem;
  }
  .el-pagination--small .el-pagination__editor.el-input .el-input__inne {
    height: 0.38rem;
  }
}
.message-pro.el-notification,  .message-pro{
  padding: 0.25rem 0.15rem !important;
  width: 5.8rem;
 
  .close-box {
    position: absolute;
    right: 0.1rem;
    width: 0.25rem;
    top: 0rem;
    z-index: 100;
    color: #909399;
    font-size: 0.25rem;
    cursor: pointer;
  }
  .mes-title {
    font-weight: bold;
    transform: translateY(-0.15rem);
    position: relative;
    padding-left: 0.08rem;
    text-align: left;
    font-size: 0.25rem;
  }
  .mes-num {
    font-weight: normal;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 100%;
    background-color: #ff2222;
    color: #fff;
    font-size: 0.2rem;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // position: absolute;
    // top: -0.05rem;
    // left: 1.05rem;
    display: inline-block;
    text-align: center;
    line-height: 0.25rem;
    transform: translate(-0.1rem, -0.2rem);
  }
  .mes-type {
    font-weight: bold;
  }
  .mes-content {
    border-radius: 0.2rem;
    border: $line-size solid #f4f4f4;
    padding: 0.15rem 0.2rem 0.15rem 0.1rem;
    display: flex;
    .mes-left {
      width: 0.8rem;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-top: 0.1rem;
      img {
        width: 0.4rem;
      }
    }
    .mes-right {
      font-size: 0.2rem;
      width: 3.9rem;
      .mes-text {
        text-align: left;
        line-height: 1.5;
      }
      .mes-other {
        display: flex;
        color: #aeaeae;
        font-size: 0.17rem;
        justify-content: space-between;
        padding-left: 0rem;
        margin-top: 0.05rem;
      }
    }
  }
  .bottom-poreate {
    text-align: right;
    margin-top: 0.2rem;
    .el-button--mini {
      font-size: $min-size;
      padding: 0.15rem 0.35rem;
    }
  }
}
.table-special-style {
  overflow: hidden;
  width: 100%;
  .task-title {
    color: #676869;
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // padding-left: 0.35rem;
  }
  .status-icon {
    position: relative;
    &:before {
      border-radius: 100%;
      content: "急";
      color: #fff;
      position: absolute;
      left: -0.35rem;
      top: -0.02rem;
      background: url(../assets/img/myHome/circle.png) no-repeat;
      border-radius: 100%;
      background-size: cover;
      width: 0.27rem;
      height: 0.27rem;
      display: block;
      font-size: 0.15rem;
      line-height: 0.27rem;
      text-align: center;
    }
  }
  .status-icon2 {
    position: relative;
    &:before {
      border-radius: 100%;
      content: "逾";
      color: #fff;
      position: absolute;
      left: -0.35rem;
      top: -0.02rem;
      background: url(../assets/img/myHome/circle.png) no-repeat;
      border-radius: 100%;
      background-size: cover;
      width: 0.27rem;
      height: 0.27rem;
      display: block;
      font-size: 0.15rem;
      line-height: 0.27rem;
      text-align: center;
    }
  }
  .status-text {
    color: #f56d62;
  }
  .examine-status {
    border-radius: 0.05rem;
    padding: 0.078rem 0.1rem;
    line-height: 100%;
    text-align: center;
    background-color: #909399;
    // border: $line-size solid #909399;
    color:#fff ;
    width: 1.1rem;
    display: inline-block;
  }
  .examine-status1 {
    // border: $line-size solid #2c64df;
    background-color:#38ab75 ;
  }
  .examine-status2 {
    // border: $line-size solid #e5bc6a;
    background-color: #fba447;
  }
  .examine-status3 {
    // border: $line-size solid #fd4e55;
    background-color: #dc4f39;
  }
  .sort-active {
    color: #2D64DF;
  }
  .urge-btn {
    display: none;
  }
  .is-urge {
    color: #fd4e55;
    .urge-btn {
      border-radius: 0.05rem;
      padding: 0.06rem 0.1rem;
      line-height: 100%;
      text-align: center;
      border: $line-size solid #2c64df;
      color:#2c64df;
      width: 0.8rem;
      display: inline-block;
      margin-left: 0.15rem;
      cursor: pointer;
    }
  }
  .custom-column-sort {
    height: 0.53rem;
    width: 0.3rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
    i {
      width: 0;
      height: 0;
      border: 0.08rem solid transparent;
      position: absolute;
      left: 0.06rem;;
    }
    .up-arrow {
      border-bottom-color: #C0C4CC;
      top: 0.05rem;
    }
    .down-arrow {
      bottom: 0.12rem;
      border-top-color: #C0C4CC;
    }
    .sort-active {
      &.up-arrow {
        border-bottom-color: #2c64df;
      }
      &.down-arrow  {
        border-top-color: #2c64df;
      }
    }

  }


}
.table-search-sort {
  font-size: 0.2rem;
  .sort-asc {
    display: flex;
    align-items: center;
    margin-bottom: 0.05rem;
    .sort-desc {
      display: flex;
      align-items: center;
    }
  }
  .sort-text {
    padding-left: 0.1rem;
    font-size: 0.2rem;
  }
  .sort-check-icon {
    color: #2D64DF;
    font-weight: 600;
    position: absolute;
    right: 0.25rem;
  }
  .sort-desc {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
    .sort-text {
      padding-left: 0.1rem;
    }
  }

}

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-task-body {
  .el-table__body-wrapper {
    height: 5.6rem !important;
  }
}
.el-table__body-wrapper {
  scrollbar-width: none;
}
.empty-text {
  font-size: 0.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #909399;
}
.load-end {
  font-size: 0.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #909399;
  padding: 0.2rem;
}
.el-message-box--center.message-confirm-custom {
  width: 3.8rem;
  .el-message-box__header {
    display: none;
  }
  .el-button--small{
    font-size: $min-size;
    padding: 0.1rem 0.3rem;
    width: 1.35rem;
  }

  padding-bottom: 0.35rem;
  padding-top: 0.2rem;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.1rem; /* 水平滚动条的高度、垂直滚动条的宽度 */
  height: 0.1rem; /* 水平滚动条的高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 颜色和样式 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaaaaa; /* 滑块颜色 */
  border-radius: 0.1rem;
}

/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
  background: #838383;
}
